<template>
  <van-tabbar
    v-model="active"
    @change="onChange"
    :route="true"
    active-color="#2DD19C"
    inactive-color="#9094A6"
  >
    <van-tabbar-item
      v-for="(item, key) in tabbars"
      :key="key"
      :to="item.to"
      :replace="true"
    >
      <span>{{ item.text }}</span>
      <template #icon="props">
        <img :src="props.active ? item.active : item.inactive" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  name: 'AppTabBar',
  data() {
    return {
      active: 0, // 当前活跃的tab
      tabbars: {
        task: {
          name: 'task',
          to: '/home',
          text: '首页',
          active: 'https://ssl-pubpic.51yund.com/1188860631.png',
          inactive: 'https://ssl-pubpic.51yund.com/1188861903.png',
        },
        rank: {
          name: 'rank',
          to: '/rank',
          text: '主屏',
          active: 'https://ssl-pubpic.51yund.com/1188861968.png',
          inactive: 'https://ssl-pubpic.51yund.com/1188860812.png',
        },
        mine: {
          name: 'mine',
          to: '/mine',
          text: '我的',
          active: 'https://ssl-pubpic.51yund.com/1188861678.png',
          inactive: 'https://ssl-pubpic.51yund.com/1188860604.png',
        },
      },
    }
  },
  mounted() {},
  methods: {
    onChange(index) {},
  },
}
</script>

<style lang="less" scoped>
.van-tabbar-item__icon img {
  height: 25px;
}

.van-hairline--top-bottom {
  position: fixed;
}
</style>
